<template>
    <el-table :data="state.data" height="700"
    :default-sort="state.sort"
    @sort-change="sortChange"
    :cell-class-name="tableCellClassName"
    style="width: 100%">
        <el-table-column prop="date" label="日期" sortable width="160" fixed>
            <template #default="scope">
                <DateOperationComponent :mdata="scope.row" />
            </template>
        </el-table-column>
        <el-table-column prop="day" label="星期" width="80">
            <template #default="scope">
                {{ getDayOfWeek(scope.row.date) }}
            </template> 
        </el-table-column>
        <el-table-column prop="close" label="价格" width="100"/>
        <el-table-column prop="display" label="display" width="100">
            <template #default="scope">
                <ToDDisplay :stock="state.stock" :date="scope.row.date" />
            </template>
        </el-table-column>
        <el-table-column prop="drawdown" label="drawdown" sortable/>
        <el-table-column prop="pct" label="pct" sortable/>
        <el-table-column prop="pct3D" label="pct3D" sortable/>
        <el-table-column prop="pct5D" label="pct5D" sortable/>
        <el-table-column prop="lp" label="分位点" sortable/>
        <el-table-column prop="gt20d" label="gt20d" sortable/>
        <el-table-column prop="gt30d" label="gt30d" sortable/>
        <el-table-column prop="gt60d" label="gt60d" sortable/>
        <el-table-column prop="gt300d" label="gt300d" sortable/>
    </el-table>
</template>

<script setup>
// 个股周数据详情页
import { reactive, watch } from 'vue';
import { getLpClassName, getDayOfWeek } from '../utils/help';
import { getTradingRankData } from '../service/stock';
import DateOperationComponent from './DateOperationComponent.vue';
import ToDDisplay from './element/ToDDisplay.vue';
import { useRouteQuery} from '../utils/useRoute'

const baseKey = "tradingRank"
const sortPropKey = baseKey + "SortProp"
const sortOrderKey = baseKey + "SortOrder"

const props = defineProps({
    stock: String
})  

const state = reactive({
    data: [],
    stock: props.stock,
    sort: { 
        prop: sessionStorage.getItem(sortPropKey) || 'date' , 
        order: sessionStorage.getItem(sortOrderKey) || 'descending' 
    }
})


let year = useRouteQuery("year","")

const loadData = () => {
    getTradingRankData(state.stock).then(res => {
        if (!year) {
            state.data = res.data.reverse().slice(0, 220)
        } else {
            state.data = res.data.reverse().filter(item => item.date.startsWith(year))
        }
    })
}

loadData()

const sortChange = (column, prop, order) => {
    sessionStorage.setItem(sortPropKey, column.prop)
    sessionStorage.setItem(sortOrderKey, column.order)
}

const tableCellClassName = ({row, column, rowIndex, columnIndex}) => {
    let columnProperty = column.property
    let val = row[columnProperty]
    if (columnProperty == "lp") {
        return getLpClassName(row.lp)
    }

    if (['pct','pct3D','pct5D'].includes(columnProperty)) {
        if (row[columnProperty] < 0) {
            return 'pctlt0-cell'
        }
    }

    if (["gt5d","gt60d","gt20d", "gt30d","gt300d"].includes(columnProperty)) {
        if (val >= 0) {
            return 'd300up-cell'
        } else {
            return 'd300down-cell'
        }
    }

    if (columnProperty == "drawdown") {
        if (val == 0) {
            return 'd300down-cell'
        }
    }
    return ''
}
</script>